/*
 * Copyright © 2015-2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '../styles/variables.less';
@import "../../bower_components/bootstrap/less/mixins.less";
@import '../styles/themes/cdap/mixins.less';

body.theme-cdap {
  &.state-hydrator {
    margin-bottom: 50px;

    main.container {
      width: 100%;
      padding-right: 0;
      padding-left: 0;

      & > div {
        margin-bottom: 0;
      }
    }

    .canvas-wrapper {
      .left-panel-wrapper {
        .left-panel {
          height: 100%;
        }
      }
    }

    my-dag-plus {
      width: 100%;
      height: ~"-moz-calc(100vh - 149px)"; // Header (50) + toppanel in detailed view (46) + footer (53)
      height: ~"-webkit-calc(100vh - 149px)";
      height: ~"calc(100vh - 149px)";
      display: block;
    }

    .my-js-dag {
      overflow: auto;
    }

    i.fa-exclamation-circle {
      margin-left: 3px;
      outline: none;
    }

    .fa-plus-square { color: @cdap-header; }
    .fa-info-circle {
      color: @brand-primary;
    }

    .fa-asterisk {
      font-size: 9px;
      color: @brand-danger;
      top: -2px;
      position: relative;
      margin-right: 1px;
    }

    fieldset.view-plugin-json {
      textarea {
        resize: none;
        height: 60vh;
      }
    }

    .col-xs-12.text-right {
      > .btn.btn-default { margin-bottom: 20px; }
    }

    // Complex Schema styling
    .tab-header-inner { background-color: white; }

    my-complex-schema my-embedded-schema-selector div.tab-toggle.expanded:before { background-color: white; }

  }


  &.state-hydrator-detail,
  &.state-hydrator-create {
    .btn {
      &.btn-orange,
      &.btn-grey {
        color: white;
      }
      &.btn-orange {
        background-color: @cdap-orange;
      }

      &.btn-grey {
        background-color: #cccccc;
      }

      &.btn-default.dropdown-toggle {
        background-color: white;
        color: #666666;
        border: 1px solid #999999;
        padding: 5px 15px;
      }
    }

    .dropdown-menu.output-schema-actions {
      top: 0;

      & > li > a {
        background-color: white;
        color: #666666;

        &:hover {
          background-color: @hydrator-blue;
          color: white;
        }
      }
    }

    .zoom-control {
      position: fixed;
    }
  }

  &.state-hydrator-detail {
    .detail-canvas-container {
      position: relative;
      .run-level-information {
        padding: 20px 20px 0px 20px;
        position: absolute;
        width: 100%;
        z-index: 998;
        display: inline-flex;

        > span {
          margin: 0;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          padding: 0 5px;
          > span {
            line-height: 1;
          }
          > strong {
            padding-right: 5px;
            line-height: 1;
          }
        }

        span.status-bubble {
          display: inline-block;
          width: 13px;
          height: 13px;
          margin-right: 5px;
          border-radius: 50%;
          &.status-green { background-color: @brand-success; }
          &.status-red { background-color: @brand-danger; }
          &.status-grey { background-color: @cdap-gray; }

          &.status-light-grey { background-color: @cdap-light-grey; }
          &.status-light-green { background-color: @cdap-light-green; }
          &.status-blue { background-color: @cdap-blue; }
          &.status-outline-grey {
            background-color: @cdap-white;
            border: 3px solid @cdap-light-grey;
            &.status-thin {
              border: 2px solid @cdap-light-grey;
            }
          }
          &.status-light-red { background-color: @cdap-light-red; }
          ~ span {
            padding-left: 5px;
          }
        }

        h3 {
          margin: 0 10px;
          margin-right: 20px;
          font-weight: 500;
          color: black;
        }
      }
    }
    my-program-history {
      ul.pagination {
        margin-right: 15px;
      }
    }
    main.container {
      margin-top: 96px; // header 50px + top panel in detailed view 46px
    }
  }

  &.state-hydrator-create {
    background-image: url('../img/grid.png');
    height: 100%;

    my-dag-plus {
      height: ~"-moz-calc(100vh - 142px)";
      height: ~"-webkit-calc(100vh - 142px)";
      height: ~"calc(100vh - 142px)";
    }
  }

  &.state-hydrator-create,
  &.state-hydrator-list,
  &.state-hydrator-create {
    .alerts {
      top: 50px;
      z-index: 999;
    }
  }
  &.state-hydrator-detail {
    .alerts {
      z-index: 999;
    }

    .zoom-control {
      top: 143px;
    }
  }

  &.state-hydrator-create {
    background-color: #e2e3e5;
    main.container {
      background-color: transparent;
      background-image: none;
      // Offset the Hydrator navbar
      margin-top: 60px;
      > div {
        margin-bottom: 0;
      }
    }
    .tiles-container {
      background-color: white;
      border-radius: 5px;

      a:hover {
        text-decoration: none;
      }

      .info {
        margin-bottom: 35px;

        h4 {
          font-weight: 400;
          font-size: 14px;
          letter-spacing: 0.3px;
        }
      }
    }

    // Create start screen
    .hydrator-start {
      margin-top: 90px;
    }
    .hydrator-preconfigured {
      margin-bottom: 50px;

      .well {
        padding: 15px;
      }
    }

    .templates-filters {
      .has-feedback > .form-control-feedback {
        line-height: 32px;
      }

      .btn-group-vertical {
        width: 100%;
        margin: 15px 0;

        button:focus {
          background-color: #e2e3e5;
        }
      }
    }

    div.template-link {
      cursor: pointer;
      width: 100%;

      p {
        color: @cdap-header;
        margin-bottom: 2px;
      }

      &:hover {
        background-color: @cdap-header;
        text-decoration: none;

        h4,
        p { color: white; }
        hr { border-color: white; }
      }

      hr {
        border: 0;
        height: 0;
        width: 100%;
        border-top: 1px solid @cdap-header;
        margin: 10px auto;
      }
    }

    .start-well {
      background-color: white;
      border-radius: 6px;
      font-weight: 500;
      margin-right: auto;
      margin-left: auto;
      height: 180px;
      width: 180px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h4,
      a {
        font-weight: 500;
      }
      h4 {
        color: @cdap-header;

        &.template-name {
          margin-bottom: 10px;
        }
      }

      p {
        font-size: 12px;
        color: @cdap-header;
      }

      &:hover {
        background-color: @cdap-header;

        h4 { color: white; }
      }
    }

    .zoom-control {
      top: 135px;
    }

    .alert {
      .message-content {
        white-space: normal;
      }
    }
  }

  &.state-hydrator-list {
    main.container {
      width: 100%;
      padding-right: 0;
      padding-left: 0;
    }
    .my-pipelines {
      margin-top: 8px;
      table.table {
        background-color: white;

        th,
        td {
          color: @gray-dark;
          padding-right: 15px;
          padding-left: 15px;
          &.pipeline-name {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        th {
          font-weight: 500;
        }

        td > span.status-bubble {
          display: inline-block;
          width: 10px;
          height: 10px;
          margin-right: 5px;
          border-radius: 25px;
          &.status-green { background-color: @brand-success; }
          &.status-red { background-color: @brand-danger; }
          &.status-grey { background-color: @cdap-gray; }

          &.status-light-grey { background-color: @cdap-light-grey; }
          &.status-light-green { background-color: @cdap-light-green; }
          &.status-blue { background-color: @cdap-blue; }
          &.status-outline-grey {
            background-color: @cdap-white;
            border: 3px solid @cdap-light-grey;

            &.status-thin {
              border: 2px solid @cdap-light-grey;
            }
          }
          &.status-light-red { background-color: @cdap-light-red; }
        }

        .delete-draft {
          cursor: pointer;
        }
      }
      .well {
        margin-top: 10px;
      }
    }
  }
}

.popover.metrics-popover {
  .popover-title {
    padding-bottom: 5px;
    padding-left: 15px;

    h4,
    h5 {
      color: initial;
    }

    h4 {
      margin-bottom: -3px;
    }
  }

  .popover-content {
    padding-left: 15px;

    .metrics-content {
      background-color: white;

      .metrics-records-out,
      .metrics-errors {
        display: inline-block;
        width: 48%;

        h5 {
          margin-top: 0;
          margin-bottom: 4px;
          font-weight: 600;
        }
      }

      .metrics-records-out {
        color: #0099ff;
      }

      .metrics-errors {
        color: @cdap-light-red;
      }
    }
  }
}
